<template>
  <div class="">
    <el-row>
      <el-col :span="24"
        ><div class="grid-content bg-purple-dark">
          <span
            style="
              margin-left: -88%;
              font-size: 30px;
              font-family: '宋体';
              font-weight: bold;
            "
            >报修登记</span
          >
          <el-breadcrumb
            style="margin-left: 20px; margin-top: 8px"
            separator="/"
          >
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>报修管理</el-breadcrumb-item>
            <el-breadcrumb-item>报修登记</el-breadcrumb-item>
          </el-breadcrumb>
        </div></el-col
      >
    </el-row>

    <el-row>
      <el-col :span="24"
        ><div
          class="grid-content bg-purple-dark"
          style="
            margin-left: -90%;
            font-size: 20px;
            font-weight: bold;
            color: gray;
          "
        >
          查询条件
        </div></el-col
      >
      <el-col :span="6"
        ><div class="grid-content bg-purple" style="margin-left: 20px">
          <el-input
            placeholder="请输入工单ID"
            v-model="pageDto.workId"
          ></el-input></div
      ></el-col>
      <el-col :span="6"
        ><div class="grid-content bg-purple" style="margin-left: 20px">
          <el-input
            placeholder="请输入报修人"
            v-model="pageDto.name"
          ></el-input></div
      ></el-col>
      <el-col :span="6"
        ><div class="grid-content bg-purple" style="margin-left: 20px">
          <el-input
            placeholder="请输入联系电话"
            v-model="pageDto.phone"
          ></el-input></div
      ></el-col>

      <el-col :span="6">
        <div
          class="grid-content bg-purple"
          style="text-align: right; margin-right: 10px"
        >
          <el-button
            type="success"
            icon="el-icon-search"
            size="small"
            @click="findPage()"
            >查询</el-button
          >
          <el-button
            type="primary"
            icon="el-icon-refresh-left"
            size="small"
            @click="resetForm()"
            >重置</el-button
          >
        </div>
      </el-col>
    </el-row>

    <el-row style="height: 60px">
      <el-col :span="12"
        ><div
          class="grid-content bg-purple"
          style="text-align: left; margin-left: 20px; font-weight: bold"
        >
          报修登记
        </div></el-col
      >
      <el-col :span="12"
        ><div
          class="grid-content bg-purple-light"
          style="text-align: right; margin-right: 20px"
        >
          <!-- 登记 -->
          <el-button
            type="success"
            @click="addDialog = true"
            size="mini"
            icon="el-icon-edit"
            >登记</el-button
          >
        </div>

        <!-- 添加UI -->
        <el-dialog
          title="报修登记"
          :visible.sync="addDialog"
          :close-on-click-modal="false"
          :append-to-body="true"
          width="500px"
          @close="clear"
        >
          <el-form
            :model="repReg"
            ref="repReg"
            :rules="rules"
            label-width="100px"
            class="demo-ruleForm"
          >
            <el-form-item label="报修内容" prop="fromId">
              <el-select
                v-model="repReg.formId"
                style="width: 100%"
                placeholder="请选择报修内容"
                @change="findAdr"
              >
                <el-option
                  v-for="item in content"
                  :key="item.formId"
                  :label="item.fromName"
                  :value="item.formId"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="报修位置" prop="repAdr">
              <el-input :disabled="true" v-model="repReg.repAdr"></el-input>
            </el-form-item>
            <el-form-item label="报修人" prop="name">
              <el-input
                placeholder="必填，请填写报修人"
                v-model="repReg.name"
              ></el-input>
            </el-form-item>
            <el-form-item label="联系电话" prop="phone">
              <el-input
                placeholder="必填，请填写联系电话"
                v-model="repReg.phone"
              ></el-input>
            </el-form-item>
            <el-form-item label="维修时间" prop="">
              <div class="block">
                <el-date-picker
                  type="datetime"
                  style="width: 100%"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  v-model="repReg.repTime"
                  placeholder="选择维修时间"
                >
                </el-date-picker>
              </div>
            </el-form-item>

            <el-form-item style="margin-left: 60px">
              <el-button type="primary" @click="addReg">登记</el-button>
              <el-button @click="addDialog = false">取消</el-button>
            </el-form-item>
          </el-form>
        </el-dialog>

        <el-dialog
          title="修改"
          :visible.sync="updDialog"
          :close-on-click-modal="false"
          :append-to-body="true"
          @close="clear"
          width="500px"
        >
          <el-form
            :model="repReg"
            ref="repReg"
            :rules="rules"
            label-width="100px"
            class="demo-ruleForm"
          >
            <el-form-item label="报修内容" prop="fromId">
              <el-input :disabled="true" v-model="repReg.name"></el-input>
            </el-form-item>
            <el-form-item label="报修位置" prop="repAdr">
              <el-input :disabled="true" v-model="repReg.repAdr"></el-input>
            </el-form-item>
            <el-form-item label="报修人" prop="name">
              <el-input
                placeholder="必填，请填写报修人"
                v-model="repReg.name"
              ></el-input>
            </el-form-item>
            <el-form-item label="联系电话" prop="phone">
              <el-input
                placeholder="必填，请填写联系电话"
                v-model="repReg.phone"
              ></el-input>
            </el-form-item>
            <el-form-item label="维修时间" prop="">
              <div class="block">
                <el-date-picker
                  type="datetime"
                  style="width: 100%"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  v-model="repReg.repTime"
                  placeholder="选择维修时间"
                >
                </el-date-picker>
              </div>
            </el-form-item>

            <el-form-item style="margin-left: 60px">
              <el-button type="primary" @click="updReg">修改</el-button>
              <el-button @click="updDialog = false">取消</el-button>
            </el-form-item>
          </el-form>
        </el-dialog>
      </el-col>
    </el-row>

    <el-table :data="pagination.records" title="报修登记" style="width: 100%">
      <el-table-column prop="workId" label="工单ID" align="center">
      </el-table-column>
      <el-table-column prop="repAdr" label="位置" align="center">
      </el-table-column>
      <el-table-column prop="repForm.fromName" label="报修内容" align="center">
      </el-table-column>
      <el-table-column prop="name" label="报修人" align="center">
      </el-table-column>
      <el-table-column prop="phone" label="联系电话" align="center">
      </el-table-column>
      <el-table-column prop="repTime" label="维修时间" align="center">
      </el-table-column>
      <el-table-column
        prop="workStatu"
        label="状态"
        align="center"
      ></el-table-column>
      <el-table-column fixed="right" label="操作" align="center">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="primary"
            v-if="scope.row.workStatu == '未派单'"
            @click="updRegUI(scope.row)"
            >修改</el-button
          >
          <el-button
            size="mini"
            type="danger"
            v-if="scope.row.workStatu == '未派单'"
            @click="deleteReg(scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-pagination
      @current-change="findPage"
      :current-page="pagination.current"
      :page-sizes="[1, 5, 10, 15, 20]"
      :page-size="pagination.size"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pagination.total"
    >
    </el-pagination>
  </div>
</template>

<script>
let checkPhone = (rule, value, callback) => {
  let reg = /^1[345789]\d{9}$/;
  if (!reg.test(value)) {
    callback(new Error("请输入11位手机号"));
  } else {
    callback();
  }
};
export default {
  name: "",
  data() {
    return {
      pagination: [],
      currentPage: null,
      total: null,

      tag1: [
        { value: "是", label: "是" },
        { value: "否", label: "否" },
      ],
      addDialog: false,
      updDialog: false,

      rules: {
        fromId: [
          { required: true, message: "请选择报修内容", trigger: "blur" },
        ],
        maintain: [
          { required: true, message: "请选择维修人员", trigger: "blur" },
        ],
        name: [{ required: true, message: "请输入报修人", trigger: "blur" }],
        phone: [
          {
            required: true,
            validator: checkPhone,
            message: "请填写正确手机号",
            trigger: "blur",
          },
        ],
      },

      pageDto: {
        pageNum: 1,
        pageSize: 10,
        workId: null,
        name: null,
        phone: null,
      },

      repReg: {
        workId: "",
        formId: "",
        name: "",
        phone: "",
        repAdr: "",
        maintain: "",
        repTime: "",
        workStatu: "未派单",
        visitContent: null,
        adminId: null,
        addtime: "",
      },
      value: null,

      // 未处理的报修单
      content: [],
    };
  },
  components: {},
  methods: {
    //重置搜索条件
    resetForm() {
      this.pageDto.pageNum = 1;
      this.pageDto.pageSize = 10;
      this.pageDto.workId = null;
      this.pageDto.phone = null;
      this.pageDto.name = null;
      this.findPage();
      // this.$refs[name].resetFields();
    },

    //分页信息显示
    findPage() {
      console.log(this.pageDto);
      this.$axios
        .post("/leanyuan/rep-reg/findReg", this.pageDto)
        .then((resp) => {
          this.pagination = resp.data.data;
          console.log(resp.data);
        })
        .catch((ex) => {});
    },

    // 选择保修内容后位置回显
    findAdr() {
      let url = "/leanyuan/rep-reg/findAdr?id=" + this.repReg.formId;
      this.$axios
        .get(url)
        .then((resp) => {
          this.repReg.repAdr = resp.data.data.repAddress;
        })
        .catch((ex) => {});
    },

    //报修内容显示
    findContent() {
      let url = "/leanyuan/rep-reg/findContent";
      this.$axios
        .get(url)
        .then((resp) => {
          this.content = resp.data.data;
        })
        .catch((ex) => {});
    },

    //设置添加时间
    setAddTime() {
      this.repReg.adminId = JSON.parse(
        window.sessionStorage.getItem("Authorization")
      ).id;
      const date = new Date();
      const year = date.getFullYear();
      const month = date.getMonth() + 1;
      const day = date.getDate();
      const hour = date.getHours();
      const minute = date.getMinutes();
      const second = date.getSeconds();
      this.month = check(month);
      this.day = check(day);
      this.hour = check(hour);
      this.minute = check(minute);
      this.second = check(second);
      function check(i) {
        const num = i < 10 ? "0" + i : i;
        return num;
      }
      this.repReg.addtime =
        year +
        "-" +
        this.month +
        "-" +
        this.day +
        " " +
        this.hour +
        ":" +
        this.minute +
        ":" +
        this.second;
    },

    //登记
    addReg() {
      this.setAddTime();
      this.$axios
        .post("/leanyuan/rep-reg/addReg", this.repReg)
        .then((resp) => {
          if (resp.data.status == "200") {
            //确认后跳转到详情页
            console.log(resp);
            this.$alert("登记成功!", "提示", {
              confirmButtonText: "确定",
              callback: (action) => {
                this.addTag = false;
              },
            });
          } else {
            this.$alert("登记失败!");
          }
          this.findPage();
          this.findContent();
          this.addDialog = false;
        })
        .catch((ex) => {});
    },

    //打开修改界面
    updRegUI(row) {
      console.log(row);
      this.updDialog = true;
      this.repReg = row;
    },

    //关闭时清空repReg对象的值
    clear() {
      this.repReg = {};
      this.repReg.workStatu = "未派单";
    },

    //修改
    updReg() {
      this.$axios
        .post("/leanyuan/rep-reg/updReg", this.repReg)
        .then((resp) => {
          if (resp.data.status == "200") {
            //确认后跳转到详情页
            console.log(resp);
            this.$alert("修改成功!", "提示", {
              confirmButtonText: "确定",
              callback: (action) => {
                this.addTag = false;
              },
            });
          } else {
            this.$alert("修改失败!");
          }
          this.findPage();
          this.findContent();
          this.updDialog = false;
        })
        .catch((ex) => {});
    },
    //删除
    deleteReg(row) {
      console.log(row.formId);
      this.$confirm("此操作将永久删除该记录, 是否继续?", "提示", {
        type: "warning",
      })
        .then(() => {
          //调用服务端的处理，然后再给出成功提示
          let url = "/leanyuan/rep-reg/delete/" + row.workId;
          this.$axios
            .delete(url)
            .then((resp) => {
              this.findPage();
              this.findContent();
            })
            .catch((ex) => {});
          this.$message({
            type: "success",
            message: "删除成功!",
          });
          console.log(this.currentPage);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },
  mounted() {
    this.findPage();
    this.findContent();
  },
};
</script>

<style  scoped>
.el-row {
  margin-bottom: 20px;
}
.el-col {
  border-radius: 4px;
  background-color: white;
  height: 80px;
}
.el-cascader {
  width: 100%;
}
.grid-content {
  border-radius: 4px;
  min-height: px;
}
.row-bg {
  padding: 10px 0;
}
</style>
